<template>
    <div id="basicLayout">
        <el-container style="min-height: 100vh">
            <el-header class="header">
                <GlobalHeader />
            </el-header>
            <el-container>
                <el-aside>
                    <div class="toggle-button" @click="handleExpand">
                        <el-icon :size="20">
                            <template v-if="isCollapse">
                                <Expand />
                            </template>
                            <template v-else>
                                <Fold />
                            </template>
                        </el-icon>
                    </div>
                    <el-menu router class="el-menu-vertical-demo" :collapse="isCollapse">
                        <el-menu-item index="/home">
                            <el-icon>
                                <house />
                            </el-icon>
                            <span>首页</span>
                        </el-menu-item>
                        <el-menu-item index="/order/list">
                            <el-icon>
                                <user />
                            </el-icon>
                            <span>工单管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-container style="margin-top: -1.5%;">
                    <el-main class="content">
                        <router-view />
                    </el-main>
                    <el-footer>
                        <p style="text-align: center;">
                            Copyright © 2024 <el-tag>小米前置培训计划</el-tag>
                            <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2024075359号</a>
                        </p>
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import GlobalHeader from "../components/GlobalHeader.vue";
import { ref } from 'vue';

const isCollapse = ref(false);

function handleExpand() {
    isCollapse.value = !isCollapse.value;
}

</script>

<style scoped>
#basicLayout .header {
    margin-bottom: 16px;
    box-shadow: #eee 1px 1px 5px;
}

#basicLayout .content {
    background: linear-gradient(to right, #fefefe, #fff);
    margin-bottom: 16px;
    padding: 20px;
}

#basicLayout .footer {
    background: #efefef;
    padding: 16px;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

.el-aside {
    background: white;
    width: auto !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 150px;
    min-height: auto;
}

.toggle-button {
    background-color: #d9e0e7;
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
    color: black;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.el-menu-item.is-active {
    color: #fff !important;
    font-size: 15px;
    font-weight: bold;
    background-color: #2661ef !important;
    border-radius: 2px;
    height: 50px;
    line-height: 50px;
    box-sizing: border-box;
    margin: 2px 5px 0px 2px;
}
</style>